<template>
	<view>
		<image src="/static/person/topbg.png" class="topbg" mode=""></image>
		<view class="top">
			<u-status-bar></u-status-bar>
			<view class="top__nav">
				<image @click="navto('/pages/personal/set')" src="/static/person/sz.png" class="sz" mode=""></image>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scbox1">
			<view class="con">
				<view class="u-flex">
					<image :src="URL(userinfo.avatar)" class="con__tx" mode="aspectFill"></image>
					<view class="">
						<view class="con__name">
							{{userinfo.username}}
						</view>
						<view class="con__gs">
							{{userinfo.company}}
						</view>
					</view>
				</view>
				<view class="u-flex u-flex-y-center u-flex-between">
					<view class="con__a" v-for="(item,index) in l1" :key="index" @click="navto('/pages/personal/'+item.url)">
						<image :src="'/static/person/'+item.i+'.png'" class="con__a__i" mode=""></image>
						<view class="con__a__t">
							{{item.text}}
						</view>
						<image src="/static/person/m.png" class="con__a__m" mode=""></image>
					</view>
					
				</view>
				<view class="con__b">
					<view class="con__b__i" v-for="(item,index) in l2" :key="index" @click="navto('/pages/personal/'+item.url)">
						<view class="con__b__i__icbox">
							<image src="/static/person/tbg.png" class="con__b__i__icbox__bg" mode=""></image>
							<image :src="'/static/person/'+item.i+'.png'" :style="item.s" mode=""></image>
						</view>
						<view class="con__b__i__text">
							{{item.text}}
						</view>
					</view>
				</view>
				<view class="con__c">
					<view class="con__c__title">
						<view class="con__c__title__b">
							
						</view>
						<view class="" style="position: relative;">
							更多服务
						</view>
					</view>
					<view class="u-flex u-flex-y-center">
						<view class="con__c__i" v-for="(item,index) in l3" :key="index" @click="navto('/pages/personal/'+item.url)" >
							<view class="con__c__i__icbox">
								<image :src="'/static/person/'+item.i+'.png'" :style="item.s" mode=""></image>
							</view>
							<view class="con__c__i__text">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<tabbar :current="2"></tabbar>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				l1:[
					{text:'账户充值',i:'cz',url:'recharge'},
					{text:'我的财富',i:'cf',url:'wallet'},
				],
				l2:[
					{text:'购货订单',i:'dd',s:'width: 31rpx;height: 31rpx;margin-left: 20rpx;margin-top: 24rpx;',url:'orderlist?type=1'},
					{text:'卖货订单',i:'dd',s:'width: 31rpx;height: 31rpx;margin-left: 20rpx;margin-top: 24rpx;',url:'orderlist?type=2'},
					{text:'上架产品',i:'sj',s:'width: 39rpx;height: 40rpx;margin-left: 17rpx;margin-top: 19rpx;',url:'shelves'},
					{text:'代理商续费',i:'xf',s:'width: 40rpx;height: 40rpx;margin-left: 16rpx;margin-top: 19rpx;',url:''},
				],
				l3:[
					{text:'提款认证',i:'rz',s:'width: 39rpx;height: 43rpx;',url:'authentication'},
					{text:'分享好友',i:'fx',s:'width: 46rpx;height: 37rpx;',url:''},
					{text:'个人资料',i:'zl',s:'width: 42rpx;height: 42rpx;',url:'userinfo'},
					{text:'我的设置',i:'sz1',s:'width: 42rpx;height: 46rpx;',url:'set'},
				],
				userinfo:{}
			};
		},
		onLoad() {
			uni.hideTabBar()
			user.userindex().then(res=>{
				if(res.data.code==1){
					this.userinfo=res.data.data
					uni.setStorageSync('88ffuserinfo',this.userinfo)
				}
			})
		},
		onShow() {
			this.userinfo=uni.getStorageSync('88ffuserinfo')
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f0f3f7;
}
.topbg{
	width: 750rpx;
	height: 401rpx;
	position: fixed;
	top: 0;
	left: 0;
}
.top{
	position: relative;
	&__nav{
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 35rpx;
	}
	.sz{
		width: 42rpx;
		height: 46rpx;
	}
}
.scbox1{
	height: calc(100vh - var(--status-bar-height) - 44px - 128rpx);
	position: relative;
	.con{
		padding: 50rpx 30rpx;
		&__tx{
			width: 120rpx;
			height: 120rpx;
			background: #64758E;
			border-radius: 50%;
			margin-right: 24rpx;
		}
		&__name{
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 38rpx;
			color: #08182C;
			line-height: 68rpx;
		}
		&__gs{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #08182C;
			line-height: 38rpx;
		}
		&__a{
			width: 274rpx;
			height: 102rpx;
			background: #FDFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 38rpx 0 24rpx;
			margin: 58rpx 0 30rpx;
			&__i{
				width: 54rpx;
				height: 54rpx;
				margin-right: 22rpx;
			}
			&__t{
				flex: 1;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #08182C;
				line-height: 30rpx;
			}
			&__m{
				width: 12rpx;
				height: 22rpx;
			}
		}
		&__b{
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 26rpx;
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;
			&__i{
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				&__icbox{
					width: 77rpx;
					height: 77rpx;
					position: relative;
					&__bg{
						width: 77rpx;
						height: 77rpx;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
				&__text{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #060A18;
					line-height: 24rpx;
					margin-top: 26rpx;
				}
			}
		}
		&__c{
			padding: 28rpx 0 50rpx;
			background: #FFFFFF;
			border-radius: 26rpx;
			margin-bottom: 28rpx;
			&__title{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #010101;
				line-height: 52rpx;
				position: relative;
				padding-left: 25rpx;
				margin-bottom: 50rpx;
				&__b{
					width: 29rpx;
					height: 29rpx;
					background: linear-gradient(-35deg, #BFCDE1 0%, #FFFFFF 100%);
					border-radius: 50%;
					position: absolute;
					top: 0;
					left: 17rpx;
				}
			}
			&__i{
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				&__icbox{
					width: 42rpx;
					height: 46rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 18rpx;
				}
				&__text{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #060A18;
					line-height: 24rpx;
				}
				
			}
		}
	}
}
</style>
